<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>用户列表统计</title>

	<link rel="stylesheet" href="../assets/css/bootstrap.min.css" />
	<link rel="stylesheet" href="../assets/font-awesome/4.5.0/css/font-awesome.min.css" />
	<link rel="stylesheet" href="../assets/css/ace.min.css" class="ace-main-stylesheet" id="main-ace-style" />
	<link rel="stylesheet" href="../assets/css/components.css">
	<link rel="stylesheet" href="../assets/css/darkblue.css">
	<link rel="stylesheet" href="../assets/css/dataTables.bootstrap.css ">
</head>

<body>
	<div>
		<div class="col-md-12">
			<!-- BEGIN CHART PORTLET-->
			<div class="portlet light bordered">
				<div class="portlet-title">
					<div class="caption">
						<i class="icon-bar-chart font-green-haze"></i>
						<span class="caption-subject bold uppercase font-green-haze"> Bar Charts</span>
						<span class="caption-helper">column and line mix</span>
					</div>
					<div class="tools">
						<a href="javascript:;" class="collapse">
						</a>
						<a href="#portlet-config" data-toggle="modal" class="config">
						</a>
						<a href="javascript:;" class="reload">
						</a>
						<a href="javascript:;" class="fullscreen">
						</a>
						<a href="javascript:;" class="remove">
						</a>
					</div>
				</div>
				<div class="portlet-body">
					<div id="chart" style="height: 500px;">
					</div>
				</div>
			</div>
			<!-- END CHART PORTLET-->
		</div>
	</div>


	<script src="../assets/js/jquery-2.1.4.min.js"></script>

	<script type="text/javascript">
		if ('ontouchstart' in document.documentElement) document.write(
			"<script src='../assets/js/jquery.mobile.custom.min.js'>" + "<" + "/script>");
	</script>

	<script src="../assets/js/jquery-migrate.min.js"></script>
	<script src="../assets/js/jquery-ui.min.js"></script>
	<script src="../assets/js/bootstrap.min.js"></script>

	<script src="../assets/js/jquery.slimscroll.min.js"></script>


	<!-- page specific plugin scripts -->

	<!--[if lte IE 8]>
	<script src="../assets/js/excanvas.min.js"></script>
<![endif]-->
	<script src="../assets/js/bootstrap-datepicker.min.js"></script>
	<!-- <script src="../assets/js/jquery.jqGrid.min.js"></script> -->
	<!-- <script src="../assets/js/grid.locale-en.js"></script> -->

	<!-- ace scripts -->
	<script src="../assets/js/ace-elements.min.js"></script>
	<script src="../assets/js/ace.min.js"></script>

	<!-- inline scripts related to this page -->


	<script src="../assets/js/metronic.js"></script>
	<script src="../assets/js/layout.js"></script>
	<script src="../assets/js/demo.js"></script>
	<script src="../assets/js/jquery.uniform.min.js"></script>
	<script>
		jQuery(document).ready(function () {
			// initiate layout and plugins
			Metronic.init(); // init metronic core components
			Layout.init(); // init current layout
			Demo.init(); // init demo features
		});
	</script>
	<script src="../assets/js/echarts.min.js"></script>

	<script>

		let userObj = JSON.parse(sessionStorage.getItem('userObj'))
		let list = userObj.userList;
		console.log(list);
		let taskID = []
		let progress = []
		for (let i = 0; i < list.length; i++) {
			if (list[i]) {
				taskID.push(list[i].id+"（"+list[i].toWhoName+")")
				progress.push(list[i].progress)
			}
		}
		console.log(taskID+progress);
		var chartDom = document.getElementById('chart')
		var myChart = echarts.init(chartDom)

		option = {
			title: {
				text: '项目成员任务进度统计表'
			},
			tooltip: {
				trigger: 'axis',
				axisPointer: {
					type: 'shadow'
				}
			},
			legend: {},
			grid: {
				left: '3%',
				right: '4%',
				bottom: '3%',
				containLabel: true
			},
			xAxis: {
				type: 'value',
				boundaryGap: [0, 0.01],
				max: 100
			},
			yAxis: {
				name: "任务号",
				type: 'category',
				data: taskID
			},
			series: [
				{
					name: '进度%',
					type: 'bar',
					data: progress,
				},
			]
		};
		myChart.setOption(option)
	</script>
</body>

</html>